<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ include file="navbar.jsp" %>
<%@ taglib  prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
 
    
    <title>My JSP 'edit_contact.jsp' starting page</title>
   <link rel="stylesheet" type="text/css" href="styles/css/bootstrap.min.css" />

  </head>
  
  <body class="body">
    <div class="container" style="margin-top:60px;width:960px;margin-left:auto;margin-right:auto;">
	  <div class="row">

	  <!-- 导入左侧部分 -->
		<jsp:include page="side.jsp">
			<jsp:param value="contact" name="tag"/>
		</jsp:include>
	
	

		<div class="span9">
		
		
			
			<form class="form-horizontal" action="pms.jspx?m=edit_contact" method="post">
        <fieldset>
          <legend>编辑联系人</legend>
          
          <div class="control-group">
			<input type="hidden" name="contactid" value="${contact.contactId }">
            <label class="control-label" for="input01" >姓名</label>
            <div class="controls">
              <input type="text" name="contactname" value="${contact.contactName }" class="span5" id="input01" x-webkit-speech="undefined" style="height:28px"><br />
			  <span id="span1" style="color:red;"></span>
            </div>
          </div>
		   <div class="control-group">
            <label class="control-label" for="input01">公司</label>
            <div class="controls">

              <input type="text" name="company" value="${contact.company }" class="span5" id="input01" x-webkit-speech="undefined" style="height:28px"><br />
			  <span id="span2" style="color:red;"></span>
            </div>
          </div>
		  <div class="line"></div>
		   <div class="control-group">
            <label class="control-label" for="input01">手机</label>
            <div class="controls">
              <input type="text" name="tel" value="${contact.tel }" class="span5" id="input01" x-webkit-speech="undefined" style="height:28px"><br />
			  <span id="span3" style="color:red;"></span>

            </div>
          </div>
		   <div class="control-group">
            <label class="control-label" for="input01">固话</label>
            <div class="controls">
              <input type="text" name="phone" value="${contact.phone }" class="span5" id="input01" x-webkit-speech="undefined" style="height:28px"><br />
			  <span id="span4" style="color:red;"></span>
            </div>
          </div>

		  <div class="control-group">
            <label class="control-label" for="input01">邮箱</label>
            <div class="controls">
              <input type="text" name="email" value="${contact.email }" class="span5" id="input01" x-webkit-speech="undefined" style="height:28px"><br />
			  <span id="span5" style="color:red;"></span>
            </div>
          </div>
		   <div class="line"></div>
		  <div class="control-group">

            <label class="control-label" for="input01">地址</label>
            <div class="controls">
              <input type="text" name="address" value="${contact.address }" class="span5" id="input01" x-webkit-speech="undefined" style="height:28px"><br />
			  <span id="span6" style="color:red;"></span>
            </div>
          </div>
		   <div class="line"></div>
		   <div class="control-group">
            <label class="control-label"  for="input01">主页</label>

            <div class="controls">
              <input type="text" name="mainweb" value="${contact.mainWeb }" class="span5" id="input01" style="height:28px"><br />
			  <span id="span7" style="color:red;"></span>
			  <p class="help-block">http://www.xxx.com</p>
            </div>
          </div>
		   <div class="control-group">
            <label class="control-label" for="input01">微博</label>
            <div class="controls">

				<select class="span2" name="weibo">
					
					<option value="weibo.com/n/">新浪微博</option>

					<option value="http://t.qq.com/">腾讯微博</option>

					<option value="https://twitter.com/">Twitter</option>
				</select>
				<div class="input-prepend">

					<span class="add-on">@</span><input name="blogname" value="${contact.blog }" class="span2" id="prependedInput" size="16" type="text" x-webkit-speech="undefined" style="height:28px">
                </div>
				
            </div>
          </div>
		   <div class="control-group">
            <label class="control-label" for="input01">简介</label>
            <div class="controls">
              <textarea name="desc" class="span5" rows="6">${contact.desc }</textarea><br />
			  <span id="span8" style="color:red;"></span>

            </div>
          </div>
		  
		  

          <div class="form-actions">
            <button type="submit" class="btn btn-primary">保存</button>
            <button class="btn" onclick="location.back()"><a href="contact.jspx" style="text-decoration:none">返回</a></button>
          </div>
        </fieldset>
      </form>          
          	
		</div>

		<div class="span3">
			
		</div>
	  </div>
	</div>
	
	
		<script type="text/javascript" src="styles/jquery/jquery.js"></script>
	<script type="text/javascript">
		$(document).ready(function(){
			$("#btnSubmit").click(function(){
			
			//验证姓名
				var contactname = $("#contactname").val();			
				if(contactname.trim().length == 0){			//在验证表单时是不能用看是不是=null来判断的，因为提交到表单之后肯定是空，而不是null，名字不可以是空格
					$("#span1").html("姓名不能为空！");
					$("#contactname").focus();
					return ;
				} 
				if(contactname.trim().length > 6){
					$("#span1").html("姓名最多不超过6位！");
					$("#contactname").focus();
					return;
				}
				
			//验证公司
				var company = $("#company").val();			
				if(company.trim().length == 0){			
					$("#span2").html("公司名不能为空！");
					$("#company").focus();
					return ;
				} 
				if(company.trim().length > 15){
					$("#span2").html("公司名最多不超过15位！");
					$("#company").focus();
					return;
				}
				
				
					
			//验证手机
				var tel = $("#tel").val();
				if(tel.trim().length == 0){
					$("#span3").html("手机号不能为空！");
					$("#tel").focus();
					return;
				} else {
					var reg = /^(133|137|138|151|152|158|188|155|)(\d+){8}$/;
					if(!tel.match(reg)){
						$("#span3").html("请填入格式正确的11位手机号码！");
						$("#tel").focus();
						return;
					}
				} 
				
			//验证固话
				var phone = $("#phone").val();
				if(phone.trim().length == 0){
					$("#span4").html("固话不能为空！");
					$("#phone").focus();
					return;
				} else {
					var reg = /^(\d+){4}-((\d+){7}|(\d+){8})$/;
					if(!phone.match(reg)){
						$("#span4").html("请填入格式正确的固话号码！如：0596—5318974");
						$("#phone").focus();
						return;
					}
				} 
				
				
				
				//验证邮箱
				var email = $("#email").val();			
				if(email.trim().length == 0){			
					$("#span5").html("邮箱不能为空！");
					$("#email").focus();
					return ;
				} else {
					var reg = /^(\w)+(\.\w+)*@(\w)+((\.\w{2,3}){1,3})$/;
					if(!email.match(reg)){
						$("#span5").html("请填入格式正确的邮箱格式!");
						$("#email").focus();
						return;
					}
				}
				
				//验证地址
				var address = $("#address").val();			
				if(address.trim().length == 0){			
					$("#span6").html("地址不能为空！");
					$("#address").focus();
					return ;
				} 
				if(address.trim().length > 30){
					$("#span6").html("地址最多不超过30位！");
					$("#address").focus();
					return;
				}
				
				//验证主页
				var mainweb = $("#mainweb").val();			
				if(mainweb.trim().length == 0){			
					$("#span7").html("主页不能为空！");
					$("#mainweb").focus();
					return ;
				} else {
				var reg = /^http:\/\/[A-Za-z0-9]+\.[A-Za-z0-9]+[\/=\?%\-&_~`@[\]\':+!]*([^<>\"\"])*$/;
					if(!mainweb.match(reg)){
						$("#span7").html("请填入格式正确的网址!");
						$("#mainweb").focus();
						return;
					}
				}
				
				//验证简介
				var desc = $("#desc").val();			
				if(desc.trim().length == 0){			
					$("#span8").html("简介不能为空！");
					$("#desc").focus();
					return ;
				} 
				if(desc.trim().length > 300){
					$("#span8").html("简介最多不超过300位！");
					$("desc").focus();
					return;
				}
				
				
				
						
				
				$("#myform").submit();
			});
		});
	</script>
  </body>
</html>
